<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link rel="stylesheet" th:href="@{/css/qietu.css}">
<link rel="stylesheet" th:href="@{/css/jquery.mCustomScrollbar.css}">
<link rel="stylesheet" th:href="@{/css/style.css}">
</head>

<body>

<div class="main">
	<div class="main-l fl">
		
		<div class="nbox pb35">
			<div class="ntime">
			2022年6月20日 12:12:12 ·
		</div>
			<div class="ntit">
				<h2>企业及设备入网情况</h2>
			</div>
			<div class="barlist">
				<ul>
					<li>
						<div class="tit">· 金属粉尘除尘类企业入网率</div>
						<div class="bar"><span style="width: 52%;"></span></div>
						<div class="attr">
							<div class="fl">
								入网 <font class="fc-fff">1232</font>  /  总计 <font class="fc-fff">4056</font>
							</div>
							<div class="fr">52%</div>
						</div>
					</li>
					<li>
						<div class="tit">· 木粉尘除尘类企业入网率</div>
						<div class="bar"><span style="width: 63%;"></span></div>
						<div class="attr">
							<div class="fl">
								入网 <font class="fc-fff">1232</font>  /  总计 <font class="fc-fff">4056</font>
							</div>
							<div class="fr">63%</div>
						</div>
					</li>
					<li>
						<div class="tit">· 金属粉尘除尘类相关设备接入率</div>
						<div class="bar"><span style="width: 68%;"></span></div>
						<div class="attr">
							<div class="fl">
								接入设备 <font class="fc-fff">11232</font>  /  设备总数 <font class="fc-fff">22056</font>
							</div>
							<div class="fr">68%</div>
						</div>
					</li>
					<li>
						<div class="tit">· 木粉尘除尘类相关设备接入率</div>
						<div class="bar"><span style="width: 20%;"></span></div>
						<div class="attr">
							<div class="fl">
								接入设备 <font class="fc-fff">11232</font>  /  设备总数 <font class="fc-fff">22056</font>
							</div>
							<div class="fr">20%</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<div class="nbox pb45">
			<div class="ntit">
				<h2>设备及传感器状态统计</h2>
			</div>
			<div class="nums">
				<ul>
					<li>
						<i class="nums-icon"><img th:src="@{/img/img01.png}"/></i>
						<div class="nums-txt">
							<p><big>13872</big></p>
							<p>在线设备</p>
						</div>
					</li>
					<li>
						<i class="nums-icon"><img th:src="@{/img/img02.png}"/></i>
						<div class="nums-txt">
							<p><big>9561</big></p>
							<p>离线设备</p>
						</div>
					</li>
					<li>
						<div class="nums-txt tcenter">
							<p class="fc-fff">设备在线率</p>
							<p><big>86.5%</big></p>
						</div>
					</li>
					<li>
						<i class="nums-icon"><img th:src="@{/img/img01.png}"/></i>
						<div class="nums-txt">
							<p><big>13872</big></p>
							<p>在线传感器</p>
						</div>
					</li>
					<li>
						<i class="nums-icon"><img th:src="@{/img/img02.png}"/></i>
						<div class="nums-txt">
							<p><big>9561</big></p>
							<p>离线传感器</p>
						</div>
					</li>
					<li>
						<div class="nums-txt tcenter">
							<p class="fc-fff">传感器在线率</p>
							<p><big>92.6%</big></p>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<div class="nbox">
			<div class="ntit">
				<h2>企业清扫自报统计</h2>
			</div>
			<div class="ncard">
				<div class="pillar" id="pillar1" >
					
				</div>
			</div>
		</div>
	</div>
	<div class="main-c fl">
		<div class="header">
			<h2>宁波市涉爆粉尘企业智能预警平台</h2>
		</div>
		<div class="nmap">
			<!--<img src="imgs/map.jpg"/>-->
			<div style="height: 670px; width: 100%;" id="map">
            </div>
            <div style="height: 670px; width: 100%; display: none;" id="map2">
            </div>
            <div class="btns">
            	<a class="active" href="javascript:;"><img th:src="@{/img/icon01.png}"/><span>企业</span></a>
            	<a href="javascript:;"><img th:src="@{/img/icon02.png}"/><span>区域</span></a>
            </div>
		</div>
		<div class="nbox">
			<div class="ntit">
				<h2>每日设备异常次数统计</h2>
			</div>
			<div class="ncard">
				<div class="pillar" id="pillar2" >
					
				</div>
			</div>
		</div>
	</div>
	<div class="main-r fr">
		<div class="nbox pb35">
			<div class="nbox-item">
				<div class="ntit">
					<h2>木粉尘除尘系统实时信息推送</h2>
				</div>
				<div class="nlist">
					<div class="tablebox">
						<table class="table">
						<thead>
							<tr>
								<td width="145">所属</td>
								<td width="115">设备</td>
								<td width="105">异常状态</td>
								<td>时间</td>
							</tr>
						</thead>
						</table>
					</div>
					<div class="tablebox roll1" id="roll1">
						<table class="table">
						<tbody>
							<tr>
								<td width="145"><a href="#" class="tit">宁波********公司...</a></td>
								<td width="115">设备名称A</td>
								<td width="105">温度过高</td>
								<td>11:34:25</td>
							</tr>
							<tr>
								<td><a href="#" class="tit">宁波********公司...</a></td>
								<td>设备名称B</td>
								<td>温度过低</td>
								<td>00:00:07</td>
							</tr>
							<tr>
								<td><a href="#" class="tit">宁波********公司...</a></td>
								<td>设备名称C</td>
								<td>温度过高</td>
								<td>00:00:01</td>
							</tr>
							<tr>
								<td><a href="#" class="tit">宁波********公司...</a></td>
								<td>设备名称D</td>
								<td>温度过高</td>
								<td>00:00:01</td>
							</tr>
							<tr>
								<td><a href="#" class="tit">宁波********公司...</a></td>
								<td>设备名称E</td>
								<td>温度过高</td>
								<td>00:00:01</td>
							</tr>
							<tr>
								<td><a href="#" class="tit">宁波********公司...</a></td>
								<td>设备名称F</td>
								<td>温度过高</td>
								<td>00:00:01</td>
							</tr>
							<tr>
								<td><a href="#" class="tit">宁波********公司...</a></td>
								<td>设备名称G</td>
								<td>温度过高</td>
								<td>00:00:01</td>
							</tr>
							<tr>
								<td><a href="#" class="tit">宁波********公司...</a></td>
								<td>设备名称H</td>
								<td>温度过高</td>
								<td>00:00:01</td>
							</tr>
							<tr>
								<td><a href="#" class="tit">宁波********公司...</a></td>
								<td>设备名称I</td>
								<td>温度过高</td>
								<td>00:00:01</td>
							</tr>
							<tr>
								<td><a href="#" class="tit">宁波********公司...</a></td>
								<td>设备名称J</td>
								<td>温度过高</td>
								<td>00:00:01</td>
							</tr>
							
						</tbody>
					</table>
				
					</div>
					
				</div>

			</div>
			<div class="nbox-item">
				<div class="ntit">
					<h2>本日各类型异常实时统计</h2>
					<div class="nnums-type fr">
						<div class="item">
							<i class="bc1"></i>
							<span>风压</span>
						</div>
						<div class="item">
							<i class="bc2"></i>
							<span>温度</span>
						</div>
						<div class="item">
							<i class="bc3"></i>
							<span>水位</span>
						</div>
						<div class="item">
							<i class="bc4"></i>
							<span>风速</span>
						</div>
					</div>
				</div>
				<div class="nnums">
					<ul>
						<li class="bc1" style="width: 10%;">10</li>
						<li class="bc2" style="width: 15%;">15</li>
						<li class="bc3" style="width: 12%;">12</li>
						<li class="bc4" >12</li>
					</ul>
					<!--<div id="pillar3" style="width:100%; height: 50px;">
						
					</div>-->
				</div>
			</div>
		</div>
		<div class="nbox pb35">
			<div class="nbox-item">
				<div class="ntit">
					<h2>金属粉尘除尘系统实时信息推送</h2>
				</div>
				<div class="nlist">
					<div class="tablebox">
						<table class="table">
						<thead>
							<tr>
								<td width="145">所属</td>
								<td width="115">设备</td>
								<td width="105">异常状态</td>
								<td>时间</td>
							</tr>
						</thead>
						</table>
					</div>
					<div class="tablebox" id="roll2">
						<table class="table">
						<tbody>
							<tr>
								<td width="145"><a href="#" class="tit">宁波********公司...</a></td>
								<td width="115">设备名称A</td>
								<td width="105">温度过高</td>
								<td>00:00:01</td>
							</tr>
							<tr>
								<td><a href="#" class="tit">宁波********公司...</a></td>
								<td>设备名称B</td>
								<td>温度过高</td>
								<td>00:00:02</td>
							</tr>
							<tr>
								<td><a href="#" class="tit">宁波********公司...</a></td>
								<td>设备名称C</td>
								<td>温度过高</td>
								<td>00:00:03</td>
							</tr>
							<tr>
								<td><a href="#" class="tit">宁波********公司...</a></td>
								<td>设备名称D</td>
								<td>温度过高</td>
								<td>00:00:04</td>
							</tr>
							<tr>
								<td><a href="#" class="tit">宁波********公司...</a></td>
								<td>设备名称E</td>
								<td>温度过高</td>
								<td>00:00:05</td>
							</tr>
							<tr>
								<td><a href="#" class="tit">宁波********公司...</a></td>
								<td>设备名称F</td>
								<td>温度过高</td>
								<td>00:00:06</td>
							</tr>
							<tr>
								<td><a href="#" class="tit">宁波********公司...</a></td>
								<td>设备名称G</td>
								<td>温度过高</td>
								<td>00:00:07</td>
							</tr>
							<tr>
								<td><a href="#" class="tit">宁波********公司...</a></td>
								<td>设备名称H</td>
								<td>温度过高</td>
								<td>00:00:08</td>
							</tr>
							<tr>
								<td><a href="#" class="tit">宁波********公司...</a></td>
								<td>设备名称I</td>
								<td>温度过高</td>
								<td>00:00:09</td>
							</tr>
							<tr>
								<td><a href="#" class="tit">宁波********公司...</a></td>
								<td>设备名称J</td>
								<td>温度过高</td>
								<td>00:00:10</td>
							</tr>
							
						</tbody>
					</table>
				
					</div>
					
				</div>
			
			</div>
			<div class="nbox-item">
				<div class="ntit">
					<h2>本日各类型异常实时统计</h2>
					<div class="nnums-type fr">
						<div class="item">
							<i class="bc1"></i>
							<span>液位</span>
						</div>
						<div class="item">
							<i class="bc3"></i>
							<span>流量</span>
						</div>
						<div class="item">
							<i class="bc4"></i>
							<span>风速</span>
						</div>
					</div>
				</div>
				<div class="nnums">
					<ul>
						<li style="width: 25%;" class="w5 bc1">25</li>
						<li style="width: 12%;" class="bc3">12</li>
						<li class="bc4">12</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript" th:src="@{/js/jquery-1.10.1.min.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery.mCustomScrollbar.concat.min.js}"></script>


<script th:src="@{/js/echarts.min.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{/js/neimenggu.js}" type="text/javascript" charset="utf-8"></script>
<script>
	
	
//柱状图1
var pillar1 = echarts.init(document.getElementById('pillar1'));
pillar1.setOption({
    color:["#00d6fb","#9045f9"],
     grid:{
        x:30,
        x2:20,
        y:45,
        y2:20,
       // borderWidth:1
    },
    title : {
        subtext: ''
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        x: 'right',
        data:['木尘','金尘'],
         textStyle:{
            	fontSize:12,
            	color:'#ffffff',
            },
	},
    calculable : true,
    xAxis : [
        {
        	axisLine:{
        		show:false,
        	},
        	 axisLabel:{

	            textStyle:{
	                fontSize:12,
	                color:'#ffffff'
	            }
	        },
            type : 'category',
            data : ['11-01','11-02','11-03','11-04','11-05','11-06',
            '11-07','11-08','11-09','11-10','11-11','11-12','11-13','11-14']
        }
    ],
    yAxis : [
        {
        	splitLine:{
            		show: true,
            		lineStyle:{
            			type:"dashed",
            			color:"#0e2d60"
            		}
            	},
            	splitArea : {show : false},//保留网格区域
            	axisLabel:{
		            textStyle:{
		                fontSize:12,
		                color:'#ffffff'
		            }
		        },
            type : 'value'
        }
    ],
    series : [
        {
            name:'木尘',
            type:'bar',
            data:[74, 62, 56, 79, 80, 30, 55, 35, 38, 41, 75, 89, 75, 89],
             markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        },
        {
            name:'金尘',
            type:'bar',
            data:[70, 65, 80, 71, 70, 40, 35, 46, 58, 40, 56, 30, 56, 30],
             markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        }
    ]
}) ;

//饼状图
/*var pillar2 = echarts.init(document.getElementById('pillar2'));
pillar2.setOption({
	color:["#00d6fb","#9045f9"],
	grid:{
		x:30,
		x2:20,
		y:45,
		y2:20,
		// borderWidth:1
	},
	title : {
		subtext: ''
	},
	tooltip : {
		trigger: 'axis'
	},
	legend: {
		x: 'right',
		data:['木尘','金尘'],
		textStyle:{
			fontSize:12,
			color:'#ffffff',
		},
	},
	calculable : true,
	xAxis : [
		{
			axisLine:{
				show:false,
			},
			axisLabel:{

				textStyle:{
					fontSize:12,
					color:'#ffffff'
				}
			},
			type : 'category',
			data : ['11-01','11-02','11-03','11-04','11-05','11-06',
				'11-07','11-08','11-09','11-10','11-11','11-12','11-13','11-14']
		}
	],
	yAxis : [
		{
			splitLine:{
				show: true,
				lineStyle:{
					type:"dashed",
					color:"#0e2d60"
				}
			},
			splitArea : {show : false},//保留网格区域
			axisLabel:{
				textStyle:{
					fontSize:12,
					color:'#ffffff'
				}
			},
			type : 'value'
		}
	],
	series : [
		{
			name:'木尘',
			type:'bar',
			data:[74, 62, 56, 79, 80, 30, 55, 35, 38, 41, 75, 89, 75, 89],
			markLine: {
				data: [
					{type: 'average', name: '平均值'}
				]
			}
		},
		{
			name:'金尘',
			type:'bar',
			data:[70, 65, 80, 71, 70, 40, 35, 46, 58, 40, 56, 30, 56, 30],
			markLine: {
				data: [
					{type: 'average', name: '平均值'}
				]
			}
		}
	]
}) ;*/var pillar2 = echarts.init(document.getElementById('pillar2'));
pillar2.setOption({

	tooltip: {
		trigger: 'axis'
	},
	legend: {
		data: ['木尘','金尘'],
		textStyle:{
			fontSize:12,
			color:'#ffffff',
		},
	},
	grid: {
		left: '3%',
		right: '4%',
		bottom: '3%',
		containLabel: true
	},
	toolbox: {
		feature: {
			saveAsImage: {}
		}
	},
	xAxis: {
		type: 'category',
		boundaryGap: false,
		data: ['11-01','11-02','11-03','11-04','11-05','11-06',
			'11-07','11-08','11-09','11-10','11-11','11-12','11-13','11-14']
	},
	yAxis: {
		type: 'value'
	},
	series : [
		{
			name:'木尘',
			type: 'line',
			stack: 'Total',
			data:[74, 62, 56, 79, 80, 30, 55, 35, 38, 41, 75, 89, 75, 89],
			markLine: {
				data: [
					{type: 'average', name: '平均值'}
				]
			}
		},
		{
			name: '金尘',
			type: 'line',
			stack: 'Total',
			data: [70, 65, 80, 71, 70, 40, 35, 46, 58, 40, 56, 30, 56, 30],
			markLine: {
				data: [
					{type: 'average', name: '平均值'}
				]
			}
		}
		]
});


//柱状图3
var pillar2 = echarts.init(document.getElementById('pillar3'));
pillar2.setOption({
    color:["#00d6fb","#48b1b4 ","#459cbd ","#9045f9"],
     grid:{
        x:30,
        x2:20,
        y:25,
        y2:20,
       // borderWidth:1
    },
    title : {
        subtext: ''
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        x: 'right',       
        data:['风压','温度','水位','风速'],
         textStyle:{
            	fontSize:12,
            	color:'#ffffff',
            },
	},
    calculable : true,
    xAxis : [
        {
        	axisLine:{
        		show:false,
        	},
        	 axisLabel:{ 
			 	
	            textStyle:{
	                fontSize:12,
	                color:'#ffffff'
	            }
	        },
            type : 'value'

        }
    ],
    yAxis : [
        {
        	splitLine:{
            		show: false,
            		lineStyle:{
            			type:"dashed",
            			color:"#0e2d60"
            		}
            	},
            	splitArea : {show : false},//保留网格区域
            	axisLabel:{ 
		            textStyle:{
		                fontSize:12,
		                color:'#ffffff'
		            }
		        },
            type : 'category',
            data : ['01']
        }
    ],
    
    
    series : [
        {
            name: '风压',
            type: 'bar',
			 stack: '总量',
            label: {
                show: true,
                position: 'insideRight'
            },
            data: [320]
        },
        {
            name: '温度',
            type: 'bar',
			stack: '总量',
            label: {
                show: true,
                position: 'insideRight'
            },
            data: [120]
        },
        {
            name: '水位',
            type: 'bar',
			stack: '总量',
            label: {
                show: true,
                position: 'insideRight'
            },
            data: [220]
        },
        {
            name: '风速',
            type: 'bar',
			stack: '总量',
            label: {
                show: true,
                position: 'insideRight'
            },
            data: [220]
        }
    ]
}) ;

//表格数据滚动 
$("#roll1,#roll2").mCustomScrollbar({

	scrollButtons:{

		enable:true

	}, 
});  

</script>
<script src="http://api.map.baidu.com/api?v=2.0&callback=map_init" type="text/javascript" charset="utf-8"></script>
<script src="https://api.map.baidu.com/getscript?v=2.0&ak=&services=&t=20210201021024" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	
//百度地图

                var markerArr = [
                    { title: "企业名称<br/><b style='color:#00d6fb;'>200/300</b>", point: "113.264531,23.157003", gszs: "3333", zxsb: "12306", lxsb: "12306" , sbzs: "12306"  },
                    { title: "企业名称<br/><b style='color:#00d6fb;'>200/300</b>", point: "113.330934,23.113401",  gszs: "3333", zxsb: "12306", lxsb: "12306" , sbzs: "12306"},
                    { title: "企业名称<br/><b style='color:#00d6fb;'>200/300</b>", point: "113.312213,23.147267",  gszs: "3333", zxsb: "12306", lxsb: "12306" , sbzs: "12306"}

                ];

                function map_init() {
                    var map = new BMap.Map("map"); // 创建Map实例
                    var point = new BMap.Point(113.312213, 23.147267); //地图中心点，广州市
                    map.centerAndZoom(point, 13); // 初始化地图,设置中心点坐标和地图级别。
                    map.enableScrollWheelZoom(true); //启用滚轮放大缩小
                    
                   
        
        map.setMapStyle({style:'midnight'})
        
        
                    //向地图中添加缩放控件
                    var ctrlNav = new window.BMap.NavigationControl({
                        anchor: BMAP_ANCHOR_TOP_LEFT,
                        type: BMAP_NAVIGATION_CONTROL_LARGE
                    });
                    //map.addControl(ctrlNav);

                    //向地图中添加缩略图控件
                    var ctrlOve = new window.BMap.OverviewMapControl({
                        anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
                        isOpen: 1
                    });
                    //map.addControl(ctrlOve);

                    //向地图中添加比例尺控件
                    var ctrlSca = new window.BMap.ScaleControl({
                        anchor: BMAP_ANCHOR_BOTTOM_LEFT
                    });
                    //map.addControl(ctrlSca);

                    var point = new Array(); //存放标注点经纬信息的数组
                    var marker = new Array(); //存放标注点对象的数组
                    var info = new Array(); //存放提示信息窗口对象的数组
                    for (var i = 0; i < markerArr.length; i++) {
                        var p0 = markerArr[i].point.split(",")[0]; //
                        var p1 = markerArr[i].point.split(",")[1]; //按照原数组的point格式将地图点坐标的经纬度分别提出来
                        point[i] = new window.BMap.Point(p0, p1); //循环生成新的地图点
                        
                        var myIcon = new BMap.Icon("imgs/icon03.png", new BMap.Size(24, 37), {  
                        //offset: new BMap.Size(10, 25), // 指定定位位置  
                        //imageOffset: new BMap.Size(0, 0 - 10 * 25) // 设置图片偏移  
                    });  
                    
                    
                        marker[i] = new window.BMap.Marker(point[i],{icon:myIcon}); //按照地图点坐标生成标记
                        
                        
                        
                        map.addOverlay(marker[i]);
                        //marker[i].setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
                        var label = new window.BMap.Label(markerArr[i].title, { offset: new window.BMap.Size(40, 0) });
                        label.setStyle({ 

　　color : "white", //字体颜色
　　fontSize : "16px",//字体大小 　　

　　backgroundColor :"0.05", //文本标注背景颜色　

　　border :"0", 　　

　　fontWeight :"bold" //字体加粗

});

                        
                        marker[i].setLabel(label);
                        info[i] = new window.BMap.InfoWindow("<dl style='font-size:13px;line-height:2; color:#fff;'>" + 
                        //markerArr[i].title +
                        "<dt>**区</dt><dd>公司总数：<span>" + markerArr[i].gszs + "</span></dd><dd>在线设备：<span>" + markerArr[i].zxsb + "</span></dd><dd>离线设备：<span>" + markerArr[i].lxsb + "</span></dd><dd>设备总数：<span>" + markerArr[i].sbzs + "</span></dd></dl>"); // 创建信息窗口对象
                    }
//                  marker[0].addEventListener("mouseover", function () {
//                      this.openInfoWindow(info[0]);
//                  });
//                  marker[1].addEventListener("mouseover", function () {
//                      this.openInfoWindow(info[1]);
//                  });
//                  marker[2].addEventListener("mouseover", function () {
//                      this.openInfoWindow(info[2]);
//                  });
                }
                map_init();
//              //异步调用百度js
//              function map_load() {
//                  var load = document.createElement("script");
//                  load.src = "http://api.map.baidu.com/api?v=1.4&callback=map_init";
//                  document.body.appendChild(load);
//              }
//              window.onload = map_load;

//地图2
 function map_init2(){

    //取得json的样式，读取json文件
$.getJSON("js/ningbo.json", "", function(data) {
    //生成地图
    createMap(data);
})
//生成地图
function createMap(data){
    echarts.registerMap('demo',data);
    var chart = echarts.init(document.getElementById('map2'));
    chart.setOption({
    	//backgroundColor:'#0a2f4a',
//       dataRange: {
//          min: 0,//颜色区间的最小值
//          max: 30,//颜色区间的最大值，和data中的最大值一致
//          x: 'left',
//          y: 'bottom',
//          text:['高','低'], // 文本，默认为数值文本
//          calculable : true,
//          inRange: {
//              //颜色区间
//              color: ['#52b2fe','yellow', 'orangered']
//          }
//       },
visualMap : {
				show:false,
				min : 0,
				max : 1000,
				left : 'left',
				top : 'bottom',
				text : [ '高', '低' ],
				seriesIndex : [ 1 ],
				inRange : {
					color : [ '#1843ce', '#52b2fe' ]
				},
				calculable : true
			},
         tooltip : {
			enterable:true,
			
			trigger: 'item',
			
			axisPointer : { // 坐标轴指示器，坐标轴触发有效
			
			type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
			
			},
			
			formatter:function(params)//数据格式
			
			{
				

				//console.log(params.data.xxx);
			 return params.data.name+'<br/>'+
'公司总数：'+params.data.gszs+'<br/>'+
'在线设备：'+params.data.zxsb+'<br/>'+
'离线设备：'+params.data.lxsb+'<br/>'+
'设备总数：'+params.data.sbzs+'';
			
			}

			},
         series: [{
         	name:'数据',
             type: 'map',
             map: 'demo',
             itemStyle:{
                 normal:{
                 	label:{show:true,
                 		color:"#fff"
                 	},
                 	borderColor : '#051b4b',
                 	areaColor :'#00d6fb'
                 },
                 emphasis:{
                 	label:{show:true,
                 	color:"#fff"},
                 	areaColor : '#00c6e8',
//						shadowOffsetX : 0,
//						shadowOffsetY : 0,
//						shadowBlur : 20,
//						borderWidth : 0,
						//shadowColor : '#72a5da'
                 }
              },
             data:[
                    {name: '慈溪市', value: 0, gszs:20, zxsb:20, lxsb:20, sbzs:20
                    
//                  	itemStyle:{
//                  		normal:{
//			                 	label:{show:true,
//			                 		color:"#fff"
//			                 	},
//			                 	borderColor : '#1d68b1',
//			                 	areaColor :'red'
//			                 },
//                  	}
                    },
                    {name: '余姚市', value: 0, gszs:20, zxsb:40, lxsb:40, sbzs:60},
                    {name: '镇海区', value: 0, gszs:20, zxsb:20, lxsb:20, sbzs:20}
                ]
            }]
        });
    }


 }
          //map_init2();  


$('.btns a').click(function(){
	$(this).addClass('active').siblings().removeClass('active');
	
	//切换
	if($(this).index()==0){
		$('#map').show();
		$('#map2').hide();
		map_init();
	}
	else{
		$('#map').hide();
		$('#map2').show();
		map_init2();
	}
	return false;
})
</script>
</body>
</html>

